<template>
  <el-menu
    class="head-bar"
    mode="horizontal"
    :default-active="activeItem"
    background-color="white"
    text-color="#8f98a7"
    active-text-color="#287cbb"
    unique-opened
    router
    @select="selectItem"
  >
    <template v-for="tag in tags">
      <!-- 多级导航 -->
      <template v-if="tag.subs">
        <el-submenu :index="tag.index" :key="tag.index">
          <template #title class="text">
            <i :class="tag.icon"></i>
            {{ tag.title }}
          </template>
          <template v-for="subItem in tag.subs">
            <el-submenu
              v-if="subItem.subs"
              :index="subItem.index"
              :key="subItem.index"
            >
              <template #title>{{ subItem.title }}</template>
              <el-menu-item
                v-for="(threeItem, i) in subItem.subs"
                :key="i"
                :index="threeItem.index"
              >
                {{ threeItem.title }}</el-menu-item
              >
            </el-submenu>
            <el-menu-item v-else :index="subItem.index" :key="subItem.index">{{
              subItem.title
            }}</el-menu-item>
          </template>
        </el-submenu>
      </template>
      <!-- 无多级导航 -->
      <template v-else>
        <el-menu-item :index="tag.index" :key="tag.index">
          <template #title class="text">
            <i :class="tag.icon"></i>
            {{ tag.title }}</template
          >
        </el-menu-item>
      </template>
    </template>
  </el-menu>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import { useStore } from 'vuex';
export default defineComponent({
  name: 'HeadBar',
  setup() {
    // 导航栏内容
    const tags = [
      {
        icon: 'el-home',
        index: 'main',
        title: '首页',
      },
      {
        icon: 'el-home',
        index: 'service',
        title: '自助服务',
      },
      {
        icon: 'el-home',
        index: 'guide',
        title: '帮助',
      },
      {
        icon: 'el-home',
        index: 'info',
        title: '个人信息',
      },
    ];
    // 响应式切换导航栏
    const store = useStore();
    const selectItem = (index: string) => {
      store.commit('changeActiveHead', index);
    };
    const activeItem = ref('');
    activeItem.value = store.state.activeHeadItem;
    watch(
      () => store.state.activeHeadItem,
      () => (activeItem.value = store.state.activeHeadItem)
    );
    return {
      tags,
      selectItem,
      activeItem,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '../../assets/css/config';
.head-bar {
  height: 100%;
  padding: 0 20px;
  border-bottom: 0 !important;
}
:deep(.el-menu-item) {
  min-width: 90px;
  font-weight: 600;
  color: $themeLight !important;
  &.is-active {
    color: $themeColor !important;
    font-weight: 800;
  }
}
:deep(.el-submenu__title) {
  color: $themeLight !important;
  font-weight: 600;
}
.el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-submenu > .el-submenu__title {
  font-weight: 600;
  color: $themeLight !important;
}
.el-menu--horizontal .el-menu .el-menu-item.is-active,
.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
  font-weight: 800;
  color: $themeColor !important;
}
.el-menu-item:focus,
.el-menu-item:hover {
  background-color: rgb(220, 225, 233) !important;
}
</style>
